/* 父容器：横向+可换行 */
.cards{
  display:flex;
  gap:10px;
  flex-wrap:wrap;             /* 允许换行 */
}

.my-card {
  border: 1px solid #ccc;          /* 边框：1像素灰色 (#ccc) 实线 */
  border-radius: 12px;             /* 圆角半径：12px，让矩形四角变圆润 */
  padding: 10px;                   /* 内边距：四周留出 16px 空白，避免内容贴边 */
  margin: 5px 0;                  /* 外边距：上下各 12px，左右 0，让卡片之间有间距 */
  background: #fafafa;             /* 背景色：浅灰色 (#fafafa)，比纯白柔和 */
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1); 
  /* 阴影：向右 2px、向下 2px，模糊半径 6px，颜色为透明黑(10%)，增加立体感 */
}

/* 大屏时：两列并排，各占 ~50%（48% 留点缝隙） */
.items, .world{
  flex:1 1 48%;
  min-width: 360px;           /* 控制何时换行（可按需要调整） */
}

.my-card h3{ /* 只改变应用my-card 样式容器中h3的属性 */
  margin-top: 0;      /* 去掉标题的上外边距 */
  margin-bottom: 0.5em; /* 可以保留一点下边距，让标题和列表不挤在一起 */
}

.my-card h4{ /* 只改变应用my-card 样式容器中h3的属性 */
  margin-top: 0;      /* 去掉标题的上外边距 */
  margin-bottom: 0.5em; /* 可以保留一点下边距，让标题和列表不挤在一起 */
}

.wy-nav-content {
  max-width: 100%;   /* 默认 ~800px，可以改大 */
}

.item-grid {
  list-style: none;              /* 去掉默认圆点 */
  padding: 0;
  margin: 0;

  display: grid;                 /* 使用 Grid 布局 */
  grid-template-columns: repeat(3, 1fr); /* 两列 */
  gap: 10px 20px;                /* 行间距10px，列间距20px */
}

.item-grid li {
  display: flex;                 /* 每个条目：图标+文字横向排布 */
  align-items: center;
}

.item-grid img.icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 4px;
}

